<template>
  <div class="container">
    <div class="content-box">
      <div class="proprietor-infor-box">
        <div class="content-box-left">
          <div
            class="content-title-line"
          >{{ organizationInfor.organizationName }}</div>
          <div class="content-line">
            <img src="@/assets/stag/address.png" alt />
            <span>地址：</span>
            {{ organizationInfor.location }}
          </div>
          <div class="content-line">
            <img src="@/assets/stag/contact.png" alt />
            <span>负责人：</span>
            {{ organizationInfor.contact }}
          </div>
          <div class="content-line">
            <img src="@/assets/stag/phone-num.png" alt />
            <span>联系电话：</span>
            {{ organizationInfor.phoneNum }}
          </div>
          <div class="content-line">
            <img src="@/assets/stag/introduction.png" alt />
            <span style="white-space: nowrap;">基地简介：</span>
            <div>{{ organizationInfor.description }}</div>
          </div>
        </div>
        <div class="content-box-right">
          <div class="content-line">
            <div class="data">{{ baseInfor.totalArea }}</div>
            <div class="title">基地概览 (亩)</div>
          </div>
          <div class="content-line1">
            <div class="data">{{ varietiesTotal }}</div>
            <div class="title">产品种类</div>
          </div>
          <div class="content-line2">
            <div class="data">{{scanDayTimes }}</div>
            <div class="title">今日扫码量（次）</div>
          </div>
          <div class="content-line3">
            <div class="data">{{ scanTotalTimes }}</div>
            <div class="title">溯源码扫码量（次）</div>
          </div>
        </div>
      </div>
      <div class="product-infor-box">
        <div class="content-title-line">产品概览</div>
        <div class="product-img-container">
          <div
            v-for="item,index in productDataList"
            :key="index"
            class="product-img-box"
          >
            <img class="product-img" :src="item.url" alt />
            <div class="content-title-line2">{{ item.productName }}</div>
            <div class="content-line">&emsp; &emsp; {{ item.introduction }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import baseApi from "@/api/basic-info-manage/fence-management/index";
import basemainslot from "@/components/BaseMainSlot/baseone.vue";
import { mymixin } from "@/utils/mixins";
import basicInfoManage from "@/api/trace-source-web/base-infor-manage/breed-varieties-management.js";
import productInfor from "@/api/trace-source-web/base-infor-manage/product-infor-management";
import traceConfigApi from "@/api/trace-source-web/traceConfig.js";

export default {
  components: {
    basemainslot,
  },
  mixins: [mymixin],
  data() {
    return {
      loading: false,
      baseInfor: {},
      organizationInfor: {},
      //产品种类
      varietiesTotal: 0,
      productDataList: [],
      //日扫描量
      scanDayTimes: 0,
      //合计扫描量
      scanTotalTimes: 0,
    };
  },
  mounted() {
    // 修复下拉框数据显示错误
    if (!sessionStorage.location) {
      sessionStorage.setItem("location", "location");
      location.reload(); // 实现页面重新加载
    }
    this.queryonInfoByCondition();
    this.queryonOrganizatioInfoByCondition();
    this.queryVarietiesInforByCondition();
    this.queryProductInforByCondition();
    this.queryScanRecord();
  },
  methods: {
    //基地基本信息
    queryonInfoByCondition() {
      baseApi.queryonInfoByCondition().then((res) => {
        if (res.code === 1) {
          this.baseInfor = res.data || {};
          console.log("queryonInfoByCondition", this.baseInfor);
        }
      });
    },
    //组织信息
    queryonOrganizatioInfoByCondition() {
      baseApi.queryonByCondition().then((res) => {
        if (res.code === 1) {
          this.organizationInfor = res.data;
        }
      });
    },
    //种类
    queryVarietiesInforByCondition() {
      basicInfoManage.getByCondition({}).then((res) => {
        if (res.code === 1) {
          this.varietiesTotal = res.data.length;
        }
      });
    },

    //产品信息
    queryProductInforByCondition() {
      productInfor.getByCondition({}).then((res) => {
        if (res.code === 1) {
          this.productDataList = res.data;
        }
      });
    },
    //扫描信息
    queryScanRecord() {
      traceConfigApi.queryScanRecordByCondition().then((res) => {
        if (res.code === 1) {
          let data = res.data;
          this.scanDayTimes = data.dayTimes;
          this.scanTotalTimes = data.totalTimes;
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.container {
  background: #ffffff;
  width: 100%;
  .content-box {
    display: flex;
    flex-direction: column;
    padding: 27px 11px 0 20px;
    .proprietor-infor-box {
      display: flex;
      justify-content: flex-end;
      height: 299px;
      margin-bottom: 21px;
      .content-box-left {
        position: relative;
        flex: 2;
        background: #edf6ff;
        border-radius: 5px 5px 5px 5px;
        margin-right: 8px;
        padding-left: 37px;
        padding-top: 14px;
        .content-title-line {
          width: 100%;
          font-weight: 500;
          font-size: 31px;
          color: #0086ff;
          line-height: 43px;
          margin-bottom: 15px;
        }
        .content-line {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          font-weight: 400;
          font-size: 16px;
          color: #2e2e2e;
          margin-bottom: 15px;
          position: relative;
          z-index: 1;
          img {
            width: 12px;
            height: 12px;
            margin-right: 5px;
          }
          span {
            font-weight: 500;
          }
        }
        &::after {
          content: "";
          position: absolute;
          bottom: 0;
          right: 0;
          width: 100%;
          height: 100%;
          background: url("~@/assets/stag/office.png") no-repeat bottom;
          background-position: 100% 100%;
        }
      }
      .content-box-right {
        flex: 1;
        display: flex;
        flex-wrap: wrap;
        .content-line,
        .content-line1,
        .content-line2,
        .content-line3 {
          width: 48%;
          display: flex;
          position: relative;
          flex-direction: column;
          justify-content: center;
          align-items: flex-start;
          margin-bottom: 9px;
          margin-right: 9px;
          padding-left: 25px;
          background: linear-gradient(180deg, #edf6ff 0%, #b1daff 100%);
          border-radius: 5px 5px 5px 5px;
          .data {
            z-index: 2;
            font-family: Arial, Arial;
            font-weight: bold;
            font-size: 24px;
            color: #0486fb;
            line-height: 32px;
          }
          .title {
            z-index: 2;
            font-family: Arial, Arial;
            font-weight: bold;
            color: #2e2e2e;
            line-height: 21px;
            line-height: 21px;
          }
        }
        .content-line::after {
          content: "";
          position: absolute;
          bottom: 0;
          right: 0;
          width: 100%;
          height: 100%;
          background: url("~@/assets/stag/scale.png") no-repeat bottom right;
        }
        .content-line1 {
          margin-right: 0;
          &::after {
            content: "";
            position: absolute;
            top: 0;
            right: 0;
            width: 100%;
            height: 100%;
            background: url("~@/assets/stag/varieties-num.png") no-repeat top
              right;
          }
        }
        .content-line2 {
          margin-bottom: 0;
          &::after {
            content: "";
            position: absolute;
            z-index: 1;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url("~@/assets/stag/scan-today.png") no-repeat center
              bottom;
          }
        }
        .content-line3 {
          margin-bottom: 0;
          margin-right: 0;
          &::after {
            content: "";
            position: absolute;
            z-index: 1;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url("~@/assets/stag/scan-total.png") no-repeat top left;
          }
        }
      }
    }
    .product-infor-box {
      display: flex;
      flex-direction: column;
      height: 557px;
      background: #edf6ff;
      border-radius: 5px 5px 5px 5px;
      .content-title-line {
        position: relative;
        padding-left: 16px;
        font-weight: 500;
        font-size: 23px;
        color: #0086ff;
        line-height: 32px;
        margin-top: 15px;
        &::before {
          position: absolute;
          content: "";
          left: 0;
          top: 0;
          width: 5px;
          height: 31px;
          background: #0486fb;
          border-radius: 0px 0px 0px 0px;
        }
      }
      .product-img-container {
        display: flex;
        width: 100%;
        margin: 36px 0 0 35px;
        .product-img-box {
          display: flex;
          flex-direction: column;
          width: 24%;
          margin-right: 10%;
          .product-img {
            width: calc(100%-20px);
            height: 237px;
            padding: 7px;
            background: #ffffff;
            box-shadow: 0px 0px 6px 1px #6fb8fc;
            border-radius: 5px 5px 5px 5px;
          }
          .content-title-line2 {
            font-weight: 400;
            font-size: 20px;
            color: #2e2e2e;
            line-height: 27px;
            text-align: center;
            margin-bottom: 8px;
            margin-top: 13px;
          }
          .content-line {
            font-weight: 400;
            font-size: 14px;
            color: #2e2e2e;
            line-height: 21px;
            text-align: left;
          }
        }
      }
    }
  }
}
</style>
